<template>
  <div class="main-container">
    <div style="background-color: #fff; height: 100%">
      <a-tabs
        :lazy-load="true"
        justify
        type="card"
        :default-active-key="active"
        @change="tabsChange"
      >
        <!-- <a-tab-pane key="1" title="入库单列表">
                    <div style="height: 100%">
                        <ReceiptList></ReceiptList>
                    </div>
                </a-tab-pane> -->
        <a-tab-pane key="1" title="五金仓入库">
          <div style="height: 100%">
            <ReceiptList2></ReceiptList2>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" title="制具仓入库">
          <div style="height: 100%">
            <ToolWarehouseIn></ToolWarehouseIn>
          </div>
        </a-tab-pane>
        <a-tab-pane key="3" title="原纱仓入库">
          <div style="height: 100%">
            <ReceiptList3></ReceiptList3>
          </div>
        </a-tab-pane>
        <!-- <a-tab-pane key="4" title="成品仓入库">
          <div style="height: 100%">
            <ReceiptList4></ReceiptList4>
          </div>
        </a-tab-pane> -->
        <a-tab-pane key="5" title="坯布仓入库">
          <div style="height: 100%">
            <ClothWarehouseIntoStorage></ClothWarehouseIntoStorage>
          </div>
        </a-tab-pane>
        <a-tab-pane key="6" title="次布仓入库">
          <div style="height: 100%">
            <secondaryDistributionWarehouseIntoStorage></secondaryDistributionWarehouseIntoStorage>
          </div>
        </a-tab-pane>
        <a-tab-pane title="成品仓入库" key="7">
          <div style="height: 100%">
            <FinishedProductInstock />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts">
  import emitter from '@/hooks/useEventBus'
  import ReceiptList2 from './components/ReceiptList2.vue'
  import ToolWarehouseIn from './components/ToolWarehouseIn.vue'
  import ReceiptList3 from './components/ReceiptList3.vue'
  import ReceiptList4 from './components/ReceiptList4.vue'
  import ClothWarehouseIntoStorage from './components/ClothWarehouseIntoStorage.vue'
  import secondaryDistributionWarehouseIntoStorage from './components/secondaryDistributionWarehouseIntoStorage.vue'
  import FinishedProductInstock from '@/views/FinishedWarehouseManagement/components/FinishedProductInstock/index.vue'
  import { useRoute } from 'vue-router'

  export default {
    name: 'Receipt',
    setup() {
      const route = useRoute()

      const active = ref('1')
      if (route.query.key) {
        active.value = route.query.key + ''
      }
      const tabsChange = (e: string | number) => {
        emitter.emit('window-change')
      }
      return {
        active,
        tabsChange,
      }
    },
    components: {
      ReceiptList2,
      ToolWarehouseIn,
      ReceiptList3,
      ReceiptList4,
      ClothWarehouseIntoStorage,
      secondaryDistributionWarehouseIntoStorage,
      FinishedProductInstock,
    },
  }
</script>

<style scoped>
  .main-container {
    height: 100%;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }

  :deep(.arco-table-td-content) {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }
</style>
